<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度集训营大作业——杨逸璇</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header class="header">
        <nav class="nav">
            <div class="container">
                <div class="nav_left">
                    <img src="images/icon.png" alt="">
                    智能小程序
                </div>
                <ul class="nav_right clearfix">
                    <li name="nav" class="li">开发文档</li>
                    <li name="nav" class="li">交流中心</li>
                    <li name="nav" class="li">服务市场</li>
                    <li name="nav" class="li">开源联盟</li>
                    <li><button>管理中心</button></li>
                </ul>
            </div>
        </nav>
        <div class="header_text">
            百度前端训练营2021开营了，赶紧报名吧！
        </div>
    </header>

    <div class="container">
        <!-- 报名 -->
        <div class="enrollBox">
            <div class="enroll" id="enrollTextBox">
                <ul class="clearfix">
                    <li>
                        <label for="">选择您的学校</label>
                        <div id="schoolEnroll">
                            <div class="school enrollbox" id="school">点击选择您所在院校</div>
                            <div class="clearfix schoolBox" id="schoolBox" style="display: none">
                                <div class="schoolBox_tab">
                                    <ul id="schoolBox_tab">
                                        <li class="sthBoxLi_active">陕西省</li>
                                        <li>省市2</li>
                                        <li>省市3</li>
                                        <li>省市4</li>
                                        <li>省市5</li>
                                        <li>省市6</li>
                                        <li>省市7</li>
                                        <li>省市8</li>
                                        <li>省市9</li>
                                        <li>省市10</li>
                                    </ul>
                                </div>
                                <div class="schoolBox_container" id="schoolBox_container">
                                    <div id="content1">
                                        <ul class="schoolBoxLis">
                                            <li>长安大学</li>
                                            <li>西安交通大学</li>
                                            <li>西安电子科技大学</li>
                                            <li>西北工业大学</li>
                                            <li>西北大学</li>
                                            <li>陕西师范大学</li>
                                            <li>西安理工大学</li>
                                            <li>西安科技大学</li>
                                            <li>西安外国语大学</li>
                                            <li>西安建筑科技大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                        </ul>
                                    </div>
                                    <div id="content2" style="display: none">
                                        <ul class="schoolBoxLis">
                                            <li>省市2大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                        </ul>
                                    </div>
                                    <div id="content3" style="display: none">
                                        <ul class="schoolBoxLis">
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>省市3大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                        </ul>
                                    </div>
                                    <div id="content4" style="display: none">
                                        <ul class="schoolBoxLis">
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>省市4大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                        </ul>
                                    </div>
                                    <div id="content5" style="display: none">
                                        <ul class="schoolBoxLis">
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>省市5大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                        </ul>
                                    </div>
                                    <div id="content6" style="display: none">
                                        <ul class="schoolBoxLis">
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>省市6大学</li>
                                            <li>*****大学</li>
                                        </ul>
                                    </div>
                                    <div id="content7" style="display: none">
                                        <ul class="schoolBoxLis">
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>省市7大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                        </ul>
                                    </div>
                                    <div id="content8" style="display: none">
                                        <ul class="schoolBoxLis">
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>省市8大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                        </ul>
                                    </div>
                                    <div id="content9" style="display: none">
                                        <ul class="schoolBoxLis">
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>省市9大学</li>
                                            <li>*****大学</li>
                                        </ul>
                                    </div>
                                    <div id="content10" style="display: none">
                                        <ul class="schoolBoxLis">
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>省市10大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                            <li>*****大学</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <label for="">选择您入学年份</label>
                        <div id="yearEnroll">
                            <div class="year enrollbox" id="year">2019</div>
                            <ul class="yearBox" id="yearBox" style="display: none;">
                                <li>2010</li>
                                <li>2011</li>
                                <li>2012</li>
                                <li>2013</li>
                                <li>2014</li>
                                <li>2015</li>
                                <li>2016</li>
                                <li>2017</li>
                                <li>2018</li>
                                <li>2019</li>
                                <li>2020</li>
                                <li>2021</li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <label for="email">输入您的电子邮箱</label>
                        <input class="email enrollbox" id="email"></input>
                    </li>
                    <li>
                        <button id="btn_submit">报名</button>
                    </li>
                </ul>
            </div>
            <div class="enroll" id="passTextBox" style="display: none;">
                <div class="passText">您已完成报名，开始您的学习之旅吧！</div>
                <div class="enrollAgain" id="enrollAgain">重新报名</div>
            </div>
            <div class="message">
                <div class="error" id="error_email" style="display: none;">邮箱地址不符合要求（yourname@host.com），请重新输入</div>
                <div class="error" id="error_school" style="display: none;">您未选择学校，请选择学校</div>
                <div class="error" id="error_emailNull" style="display: none;">请填写邮箱（例：yourname@host.com）</div>
                <div class="pass" id="pass" style="display: none;"></div>
            </div>
        </div>
        <!-- 内容 -->
        <section class="section1">
            <div>
                <div class="fontSize36">我们的宗旨</div>
                <ul class="section1_text clearfix">
                    <li>
                        <p>自律独立思考</p>
                        <img src="images/thinking.jpg" alt="">
                    </li>
                    <li>
                        <p>实践</p>
                        <img src="images/coding.jpg" alt="">
                    </li>
                    <li>
                        <p>总结回顾</p>
                        <img src="images/reviewing.jpg" alt="">
                    </li>
                    <li>
                        <p>分享交流</p>
                        <img src="images/sharing.jpg" alt="">
                    </li>
                </ul>
            </div>
        </section>
        <section class="section2">
            <div class="tabBox clearfix">
                <div class="fontSize36">课程安排</div>
                <ul class="tab clearfix">
                    <li name="tab" id="WHOLE" class="tab_active">全部</li>
                    <li name="tab" id="HTML">HTML</li>
                    <li name="tab" id="CSS">CSS</li>
                    <li name="tab" id="JavaScript">JavaScript</li>
                </ul>
            </div>
            <ul class="lesson">
                <li class="WHOLE HTML">
                    <img src="images/lesson.jpg" alt="">
                    <div class="lesson_right">
                        <div class="lesson_name">第一课&nbsp;这里是课程名字</div>
                        <p>这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要
                        </p>
                        <div class="tab_name tab_HTML">HTML</div>
                    </div>
                </li>
                <li class="WHOLE HTML">
                    <img src="images/lesson.jpg" alt="">
                    <div class="lesson_right">
                        <div class="lesson_name">第二课&nbsp;这里是课程名字</div>
                        <p>这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要
                        </p>
                        <div class="tab_name tab_HTML">HTML</div>
                    </div>
                </li>
                <li class="WHOLE CSS">
                    <img src="images/lesson.jpg" alt="">
                    <div class="lesson_right">
                        <div class="lesson_name">第三课&nbsp;这里是课程名字</div>
                        <p>这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要
                        </p>
                        <div class="tab_name tab_CSS">CSS</div>
                    </div>
                </li>
                <li class="WHOLE CSS">
                    <img src="images/lesson.jpg" alt="">
                    <div class="lesson_right">
                        <div class="lesson_name">第四课&nbsp;这里是课程名字</div>
                        <p>这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要
                        </p>
                        <div class="tab_name tab_CSS">CSS</div>
                    </div>
                </li>
                <li class="WHOLE HTML CSS">
                    <img src="images/lesson.jpg" alt="">
                    <div class="lesson_right">
                        <div class="lesson_name">第五课&nbsp;这里是课程名字</div>
                        <p>这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要
                        </p>
                        <div class="tab_name tab_HTML">HTML</div>
                        <div class="tab_name tab_CSS">CSS</div>
                    </div>
                </li>
                <li class="WHOLE JavaScript">
                    <img src="images/lesson.jpg" alt="">
                    <div class="lesson_right">
                        <div class="lesson_name">第六课&nbsp;这里是课程名字</div>
                        <p>这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要
                        </p>
                        <div class="tab_name tab_JavaScript">JavaScript</div>
                    </div>
                </li>
                <li class="WHOLE HTML CSS JavaScript">
                    <img src="images/lesson.jpg" alt="">
                    <div class="lesson_right">
                        <div class="lesson_name">第七课&nbsp;这里是课程名字</div>
                        <p>这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要
                        </p>
                        <div class="tab_name tab_HTML">HTML</div>
                        <div class="tab_name tab_CSS">CSS</div>
                        <div class="tab_name tab_JavaScript">JavaScript</div>
                    </div>
                </li>
                <li class="WHOLE HTML CSS JavaScript">
                    <img src="images/lesson.jpg" alt="">
                    <div class="lesson_right">
                        <div class="lesson_name">第八课&nbsp;这里是课程名字</div>
                        <p>这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要，这里是课程内容的概要
                        </p>
                        <div class="tab_name tab_HTML">HTML</div>
                        <div class="tab_name tab_CSS">CSS</div>
                        <div class="tab_name tab_JavaScript">JavaScript</div>
                    </div>
                </li>
            </ul>
        </section>
    </div>

    <!-- 底部 -->
    <footer class="footer">
        <div class="container clearfix">
            <div class="circle">
                <div>I</div>
                <div>F</div>
                <div>E</div>
            </div>
            <div class="links">
                <div>
                    <h3>Links</h3>
                    <ul>
                        <li><a href="javascript:;">百度技术培训中心</a></li>
                        <li><a href="javascript:;">百度技术</a></li>
                        <li><a href="javascript:;">技术培训中心</a></li>
                        <li><a href="javascript:;">百度技术培训中心</a></li>
                        <li><a href="javascript:;">百度技术</a></li>
                    </ul>
                </div>
                <div>
                    <h3>Links</h3>
                    <ul>
                        <li><a href="javascript:;">百度技术培训中心</a></li>
                        <li><a href="javascript:;">百度技术</a></li>
                        <li><a href="javascript:;">技术培训中心</a></li>
                        <li><a href="javascript:;">百度技术培训中心</a></li>
                        <li><a href="javascript:;">百度技术</a></li>
                    </ul>
                </div>
                <div>
                    <h3>Links</h3>
                    <ul>
                        <li><a href="javascript:;">百度技术培训中心</a></li>
                        <li><a href="javascript:;">百度技术</a></li>
                        <li><a href="javascript:;">技术培训中心</a></li>
                        <li><a href="javascript:;">百度技术培训中心</a></li>
                        <li><a href="javascript:;">百度技术</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>